<template>
    <div>
        <!--导航-->
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
                        全部
                    </a>
                    <a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
                        家居生活
                    </a>
                    <a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
                        摄影设计
                    </a>
                    <a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
                        明星美女
                    </a>
                    <a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
                        城市建筑
                    </a>
                    <a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
                        自然风景
                    </a>
                </div>
            </div>

        </div>
        <!--图片列表-->
        <ul class="img-list">
            <li v-for="item in list">
                <img v-lazy="item.src">
            </li>
        </ul>
    </div>
</template>
<script type="es6">
import mui from '../../lib/mui/js/mui.min.js';
export default {
    data(){
        return {
            list: [
                {id:1,src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563123889701&di=3b8c00fd83d5ca04ee422f3b1962459a&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2Fzw%2Ffw%2FQJ6210589581.jpg'},
                {id:2,src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563124036972&di=6041cd334ecda218c9a5ecbf9a38b1f3&imgtype=0&src=http%3A%2F%2Fww2.sinaimg.cn%2Fmw600%2Fd75e3906jw1edl65bg4j4j20ii0iidoy.jpg'},
                {id:3,src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563124180481&di=216d90db1fbadd86cd2a887d7178ac20&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180622%2Fcd40a0e84f124ab0ad0edf5c2fe74138.jpeg'},
                {id:4,src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563124291943&di=3453b14f3e4ed7ee8b08b2b85e7576ae&imgtype=0&src=http%3A%2F%2Fwww.jxotis.com%2Fupload%2Fxh%2F201708100950474591.jpg'}
            ]
        }
    },
    methods: {

    },
    mounted(){
    // 初始化滑动控件
      mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      });
    }

}
</script>
<style lang="less" scoped>
    * {
        touch-action: pan-y;
    }
    .img-list {
        list-style: none;
        margin: 0;
        padding: 10px;
        padding-bottom: 0;
        li {
            text-align: center;
            background-color: #ccc;
            margin-bottom: 10px;
            img {
                width: 100%;
                vertical-align: middle;
            }
            img[lazy=loading] {
                width: 40px;
                height: 300px;
                margin: auto;
            }
        }
    }
</style>